<template>
    <div class="carousel-icon-box">
        <img v-for="(item,index) in navList" :key="index"
         @click="navClick(index,item.path)"
         :src="activePath===item.path?item.activeIcon:item.icon"
        />
      </div>
</template>
<script>
export default {
    data() {
        return {
            navList:[
                {path:"/",icon:require("@/assets/nav/home.svg"),activeIcon:require("@/assets/nav/home-av.svg")},
                {path:"/about",icon:require("@/assets/nav/about.svg"),activeIcon:require("@/assets/nav/about-av.svg")},
                {path:"/skills",icon:require("@/assets/nav/skills.svg"),activeIcon:require("@/assets/nav/skills-av.svg")},
                {path:"/experience",icon:require("@/assets/nav/experience.svg"),activeIcon:require("@/assets/nav/experience-av.svg")},
                {path:"/works",icon:require("@/assets/nav/works.svg"),activeIcon:require("@/assets/nav/works-av.svg")},
                {path:"/end",icon:require("@/assets/nav/end.svg"),activeIcon:require("@/assets/nav/end-av.svg")},
            ],
            activeIndex:0
        }
    },
    computed:{
      activePath: {
        get(){
          return this.$route.path;
        }
      }
    },
    methods:{
        navClick(val,path) {
          if(this.activeIndex>val) {
            this.$emit("navClick",false)
          }
          if(this.activeIndex<val) {
            this.$emit("navClick",true)
          }
          if (this.activePath !== val) {
            this.activeIndex = val
            this.$router.push(path)
          }    
    },
    }
}
</script>

<style scoped>
.carousel-icon-box{
    display: flex;
    z-index: 2;
    flex-direction: column;
    font-size: 0.8rem;
    position: fixed;
    right: 0.1rem;
    top: 2rem
  }
  .carousel-icon-box > img {
    margin-bottom: 0.5rem;
    width: 0.5rem;
  }
</style>